<route lang="jsonc">
{
  "layout": "tabbar",
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "我的",
  },
}
</route>

<template>
  <view class="profile-page">
    <!-- 状态栏 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-content">
        <view class="nav-title"> </view>
        <view class="nav-right" @click="to(`/pages/me/userinfo/index`)">
          <wd-icon name="setting" size="24px" color="#333"></wd-icon>
        </view>
      </view>
    </view>

    <!-- 用户信息区域 -->
    <view class="user-section">
      <view class="avatar-container">
        <view class="avatar-wrapper">
          <image
            class="avatar"
            src="/static/avatar-placeholder.png"
            mode="aspectFill"
          ></image>
          <view class="avatar-border"></view>
        </view>
      </view>
      <view class="username">王俊凯</view>

      <!-- 功能按钮 -->
      <view class="action-buttons">
        <view class="action-btn primary">
          <wd-icon name="notification" size="16px" color="#D50159"></wd-icon>
          <!-- <wd-icon name="heart-fill" size="16px" color="#ff4757"></wd-icon> -->
          <text style="margin-left: 10rpx; margin-right: 10rpx">提醒设置</text>
          <wd-icon name="arrow-right" size="12px"></wd-icon>
        </view>
        <view class="action-btn secondary">
          <wd-icon name="phone" size="16px" color="#D50159"></wd-icon>
          <text style="margin-left: 8rpx; margin-right: 10rpx"
            >手机重要设置</text
          >
          <wd-icon name="arrow-right" size="12px"></wd-icon>
        </view>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="menu-section">
      <wd-cell-group>
        <wd-cell
          v-for="item in menuList"
          :key="item.id"
          :title="item.title"
          is-link
          @click="handleMenuClick(item)"
        >
          <template #icon>
            <view style="margin-right: 22rpx"
              ><wd-icon :name="item.icon" size="30rpx" color="#666"></wd-icon
            ></view>
          </template>
        </wd-cell>
      </wd-cell-group>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { to } from '@/utils';

// 状态栏高度
const statusBarHeight = ref(0);

// 当前选中的tab
const activeTab = ref('profile');

// 菜单列表数据
const menuList = ref([
  { id: 1, title: '连接软件', icon: '/static/me/lianjie.png' },
  { id: 2, title: '消息中心', icon: '/static/me/ygzz_xxzx.png' },
  { id: 3, title: '联系客服', icon: '/static/me/lianxikefu.png' },
  { id: 4, title: 'APP版本', icon: '/static/me/version.png' },
  { id: 5, title: '隐私政策', icon: '/static/me/yinsi.png' },
  { id: 6, title: '用户协议', icon: '/static/me/xieyi.png' },
]);

// 获取系统信息
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 0;
});

// 处理菜单点击
const handleMenuClick = (item) => {
  console.log('点击菜单:', item.title);
  // 根据不同菜单项进行相应的跳转或操作
  switch (item.id) {
    case 1:
      // 连接软件
      break;
    case 2:
      // 消息中心
      break;
    case 3:
      // 联系客服
      break;
    case 4:
      // APP版本
      break;
    case 5:
      // 隐私政策
      break;
    case 6:
      // 用户协议
      break;
  }
};
</script>

 

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  //   background: linear-gradient(180deg, #ffeaa7 0%, #fab1a0 30%, #ffffff 30%);
}

.status-bar {
  background: transparent;
}

.nav-bar {
  padding: 10px 20px;

  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .nav-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }

    .nav-right {
      width: 24px;
      height: 24px;
    }
  }
}

.user-section {
  padding: 40rpx 20rpx 44rpx;
  text-align: center;

  .avatar-container {
    margin-bottom: 14rpx;

    .avatar-wrapper {
      position: relative;
      display: inline-block;

      .avatar {
        width: 241.6rpx;
        height: 241.6rpx;
        border-radius: 50%;
        background: #ff7675;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .avatar-border {
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 2px solid rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        border-top-color: #ff7675;
        animation: rotate 3s linear infinite;
      }
    }
  }

  .username {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
  }

  .action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;

    .action-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 320rpx;
      height: 90rpx;
      justify-content: center;
      //   padding : 24rpx  24rpx  24rpx  24rpx;
      border-radius: 20px;
      font-size: 14px;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 8rpx 0rpx #cfcfcf;
      border-radius: 24rpx 24rpx 24rpx 24rpx;

      &.primary {
        background: rgba(255, 255, 255, 0.9);
        color: #333;
      }

      &.secondary {
        background: rgba(255, 255, 255, 0.7);
        color: #333;
      }
    }
  }
}

.menu-section {
  margin: 0 20px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  //   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 自定义tabbar样式
:deep(.wd-tabbar-item--active) {
  color: #ff4757 !important;
}

:deep(.wd-tabbar) {
  background: #fff;
  border-top: 1px solid #eee;
}
</style>
